<div id="modals">
    <div class="modal fade" id="modal--img-view" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">预览</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <img src="" alt="" width="220px;"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i
                            class="fa fa-close"></i> 关闭
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<div class="row">

    <div class="top-handle-btn">
        <button style="margin-bottom: 10px;" class='btn green radius6 add-btn'><i class="fa fa-plus"></i> 添加商品</button>

        <form id="search-form" action="javascript:;">
            每页显示：<input name="pageSize" class="form-control  input-small inline" type="number" min="2" max="50"
                        style="width: 80px;"
                        value="10"/>
            <select name="liteId" class=" input-medium form-control inline ">
                <option value="">所有加盟店</option>
            </select>
            <select name="typeId" class=" input-medium form-control inline ">
                <option value="">分类</option>
            </select>
            <select name="brandId" class=" input-medium form-control inline ">
                <option value="">品牌</option>
            </select>
            <select name="goodsProp" class=" input-medium form-control inline ">
                <option value="">商品属性</option>
                <option value="20001">普通</option>
                <option value="20002">保税商品</option>
                <option value="20003">直邮商品</option>
            </select>
            <input type="text " name="queryKey" class="form-control input-medium inline" placeholder="输入商品名称/编号查询"/>
            <button class="btn purple right search radius6"><i class="fa fa-search"></i> 查询</button>
        </form>
    </div>
</div>

<div class="row">
    <table id="data-table" class="table table-striped table-bordered table-hover" width="100%">
        <thead>
        <tr>
            <th>商品编号</th>
            <th>LOGO</th>
            <th>商品名称</th>
            <th>商品分类</th>
            <th>商品品牌</th>
            <th>商品属性</th>
            <th>售价</th>
            <th>成本</th>
            <th>实际销量</th>
            <th>上架状态</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>

<script type="text/javascript">
    var state = "/goods";
    sessionStorage.removeItem("editGoodsId");

    $(function () {
        document.querySelector(".add-btn").onclick = function (e) {
            loadHtml("/mall/goods-edit");
        };

        $("select").select2();
        DataTable.init({
            url: state,//ajax请求url
            tableName: "data-table",//数据表table id
            paramsFormName: "search-form",//查询参数form id
            modal: "modals",//模态框div
            columns: [//列对应的字段数组，注意顺序
                {data: "goodsNo"},
                {data: "logo", type: 'img', view: "modal--img-view"},
                {data: "goodsName"},
                {data: "typeName"},
                {data: "brandName"},
                {data: "goodsProp", replaceFn: "replaceDataDict"},
                {data: "salePrice"},
                {data: "costPrice"},
                {data: "reallySaleCount"},
                {
                    data: "isEnabled",
                    convert: "1=> <input type='checkbox' class='ck-sw' data-size='small' checked >" +
                    "|0=><input class='ck-sw'   type='checkbox' data-size='small'>"
                },
            ],
            options: [//操作区域(id)
                {
                    icon: "fa fa-edit",
                    name: "编辑",
                    pre: "toEdit"
                },
                {
                    icon: "fa fa-remove",
                    name: "删除",
                    del: state,
                },
            ],
            endFnOnce: "loadTypes",
            endFn: "registerSwitchClick"
        });
    });

    function setShow(obj, v) {
        var id = $(obj).parents("tr").attr("data-id");
        var goodsName = $(obj).parents("tr").find("td[data-name=goodsName]").html();
        bootbox.confirm("确定要将商品[" + goodsName + "]" + (v == 1 ? "上架？" : "下架？") + "", function (result) {
            if (result) {
                Shinez.put(state + "/" + id + "/show", {isEnabled: v, id: id}, function (ret) {
                    if (ret.status == 0) {
                        Shinez.tip("success", "操作成功");
                        obj.bootstrapSwitch("state", v, true);
                    } else {
                        Shinez.tip("danger", ret.info);
                    }
                });
            }
        });
//        var isShow = $(obj).parents("tr").find("td[data-name=isShow]").attr("data-value");
    }

    function toEdit(id) {
        sessionStorage.setItem("editGoodsId", id);
        loadHtml("/mall/goods-edit");
    }


    function registerSwitchClick() {
        $('.ck-sw').on('switchChange.bootstrapSwitch', function (e, state) {
            var $this = $(this);
            $this.bootstrapSwitch('state', !state, true);
            setShow($this, state);
        });
    }


    function loadTypes(data) {
        var lites = data.lites;
        var brands = data.goodsBrands;
        var types = data.goodsTypes;
        var $brandsContainer = $("<div></div>");
        var $typesContainer = $("<div></div>");
        var brandsContent = buildOption(brands, $brandsContainer, "goodsBrands", "brandName");
        var liteAuth = data.liteAuth;
        if (liteAuth == 1) {

        }
        $("select[name=brandId]").append(brandsContent.html());
        var typeContent = buildOption(types, $typesContainer, "goodsTypes", "typeName");
        $("select[name=typeId]").append(typeContent.html());

        $.each(lites, function (k, v) {
            $("select[name=liteId]").append("<option value='" + v.id + "'>" + v.liteName + "</option>");
        })


    }

    function buildOption(arrayInfo, $groupObj, arrayName, value) {
        for (var i = 0; i < arrayInfo.length; ++i) {
            var childrenBrand = arrayInfo[i][arrayName];
            if (childrenBrand != null && childrenBrand.length > 0) {
                var $group = $("<optgroup label='" + arrayInfo[i][value] + "'></optgroup>");
                $groupObj.append(buildOption(childrenBrand, $group, arrayName, value));
            } else {
                $groupObj.append("<option value='" + arrayInfo[i].id + "'>" + arrayInfo[i][value] + "</option>");
            }
        }
        return $groupObj;
    }


</script>